<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>用户登录</title>
    <link rel="stylesheet" href="" th:href="@{/css/login.css}">
</head>
<body>
<img th:src="@{/images/bg.jpg}" class="img-fluid" alt="...">
<form method="post" th:action="@{check}">
    <div class="main">
        <div class="login">
            <div class="log-con">
                <h1>Login</h1>
                <input type="text" required="required" class="name" placeholder="用户名" name="loginName"/>
                <input type="password" required="required" class="password" placeholder="密码" name="loginPwd"/>
                <input autocomplete="off" id="verify_input" placeholder="验证码" maxlength="6" name="code">
                <div id="verify_image">
                    <img id="imgVerify" src="login/getVerify" alt="更换验证码" style="padding: 0 0 5px 10px" height="45"
                         width="277" onclick="getVerify(this);">
                </div>
                <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                <button class="but" type="submit">登录</button>
                <a th:href="@{register}">注册</a>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/three.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>
<script>
    function getVerify() {
        $("#verify_input").val("");
        $("#imgVerify").attr("src", 'login/getVerify?' + Math.random());//jquery方式
    }
</script>
</html>